@extends('admin.admin')

@section('content')
        <!-- Morris chart -->
        <link rel="stylesheet" href="{{ asset('/components/AdminLTE/plugins/morris/morris.css') }}">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                {{trans('home.panel_header')}}
                <small>Dashbord</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i>{{trans('home.panel_header')}} </a></li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-lg-3 col-xs-6">
                    <!-- small box -->
                    <div class="small-box bg-aqua">
                        <div class="inner">
                            <h3>{{$goodsNum}}</h3>
                            <p>商品总数</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-bag"></i>
                        </div>
                        <a href="/admin/goods" class="small-box-footer">查看商品 <i class="fa fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <!-- ./col -->
                <div class="col-lg-3 col-xs-6">
                    <!-- small box -->
                    <div class="small-box bg-green">
                        <div class="inner">
                            <h3>{{$orderNum}}</h3>
                            <p>最新订单</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-stats-bars"></i>
                        </div>
                        <a href="/admin/order" class="small-box-footer">查看订单 <i class="fa fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <!-- ./col -->
                <div class="col-lg-3 col-xs-6">
                    <!-- small box -->
                    <div class="small-box bg-yellow">
                        <div class="inner">
                            <h3>{{$userNum}}</h3>

                            <p>注册用户</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-person-add"></i>
                        </div>
                        <a href="/admin/user" class="small-box-footer">用户管理 <i class="fa fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <!-- ./col -->
                <div class="col-lg-3 col-xs-6">
                    <!-- small box -->
                    <div class="small-box bg-red">
                        <div class="inner">
                            <h3>{{$activityNum}}</h3>

                            <p>专题活动</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-pie-graph"></i>
                        </div>
                        <a href="/admin/activity" class="small-box-footer">活动管理 <i class="fa fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <!-- ./col -->
            </div>
            <div class="row">
                <!-- Left col -->
                <section class="col-lg-7 connectedSortable">
                    <!-- solid sales graph -->
                    <div class="box box-solid bg-teal-gradient">
                        <div class="box-header">
                            <i class="fa fa-th"></i>

                            <h3 class="box-title">月订单报表</h3>

                        </div>
                        <div class="box-body border-radius-none">
                            <div class="chart" id="line-chart" style="height: 250px;"></div>
                        </div>
                        <!-- /.box-body -->
                        <div class="box-footer no-border">
                            <div class="row">
                                <div class="col-xs-2 text-center" style="border-right: 1px solid #f4f4f4">
                                    <input type="text" class="knob" data-readonly="true" value="{{$orderStatus[1]}}" data-width="60" data-height="60" data-fgColor="#39CCCC">

                                    <div class="knob-label">待支付订单</div>
                                </div>
                                <!-- ./col -->
                                <div class="col-xs-2 text-center" style="border-right: 1px solid #f4f4f4">
                                    <input type="text" class="knob" data-readonly="true" value="{{$orderStatus[2]}}" data-width="60" data-height="60" data-fgColor="#39CCCC">

                                    <div class="knob-label">待发货订单</div>
                                </div>
                                <!-- ./col -->
                                <div class="col-xs-2 text-center" style="border-right: 1px solid #f4f4f4">
                                    <input type="text" class="knob" data-readonly="true" value="{{$orderStatus[3]}}" data-width="60" data-height="60" data-fgColor="#39CCCC">

                                    <div class="knob-label">已发货订单</div>
                                </div>
                                <!-- ./col -->
                                <div class="col-xs-2 text-center" style="border-right: 1px solid #f4f4f4">
                                    <input type="text" class="knob" data-readonly="true" value="{{$orderStatus[4]}}" data-width="60" data-height="60" data-fgColor="#39CCCC">

                                    <div class="knob-label">已完成订单</div>
                                </div>
                                <!-- ./col -->
                                <div class="col-xs-2 text-center">
                                    <input type="text" class="knob" data-readonly="true" value="{{$orderStatus[5]}}" data-width="60" data-height="60" data-fgColor="#39CCCC">

                                    <div class="knob-label">已取消订单</div>
                                </div>
                                <!-- ./col -->
                            </div>
                            <!-- /.row -->
                        </div>
                        <!-- /.box-footer -->
                    </div>
                    <!-- /.box -->


                </section>
                <!-- /.Left col -->
                <section class="col-lg-5 connectedSortable">
                    <div class="box box-info">
                        <div class="box-header with-border">
                            <h3 class="box-title">最新订单</h3>

                            <div class="box-tools pull-right">
                                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                                </button>
                                <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                            </div>
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body">
                            <div class="table-responsive">
                                <table class="table no-margin">
                                    <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>编号</th>
                                        <th>状态</th>
                                        <th>时间</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($newOrder as $key=>$order)
                                    <?php
                                        $orderStatusArr = ['0'=>'状态', '1'=>'待支付','2'=>'待发货','3'=>'已发货','4'=>'已完成','5'=>'已取消','6'=>'已退款'];
                                        $color= ['0'=>'label-default', '1'=>'label-info','2'=>'label-warning','3'=>'label-info','4'=>'label-success','5'=>'label-default','6'=>'label-info'];
                                        $status = $orderStatusArr[$order->order_status];
                                    ?>
                                    <tr>
                                        <td><a href="{{asset('/admin/order/')}}/{{$order->order_id}}?back_url={{asset('/admin')}}">{{$order->order_id}}</a></td>
                                        <td>{{$order->order_sn}}</td>
                                        <td><span class="label {{$color[$order->order_status]}} ">{{$status}}</span></td>
                                        <td>
                                            <div class="sparkbar" data-color="#00a65a" data-height="20">{{$order->add_time}}</div>
                                        </td>
                                    </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.table-responsive -->
                        </div>
                        <!-- /.box-body -->
                        <div class="box-footer clearfix">
                            <a href="/admin/order" class="btn btn-sm btn-default btn-flat pull-right">查看全部</a>
                        </div>
                        <!-- /.box-footer -->
                    </div>

                </section>
            </div>

            <!-- Your Page Content Here -->
        </section>
        <!-- /.content -->
<!-- jQuery 2.1.4 -->
<!-- jQuery UI 1.11.4 -->
<script src="/components/AdminLTE/plugins/jQueryUI/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
    $.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.5 -->
<!-- Morris.js charts -->
<script src="//cdn.bootcss.com/raphael/2.1.4/raphael-min.js"></script>
<script src="{{ asset('/components/AdminLTE/plugins/morris/morris.min.js') }}"></script>
<!-- Sparkline -->
<!-- jvectormap -->
<!-- jQuery Knob Chart -->
<script src="{{ asset('/components/AdminLTE/plugins/knob/jquery.knob.js') }}"></script>
<!-- daterangepicker -->

<!-- datepicker -->
<!-- Bootstrap WYSIHTML5 -->
<script src="{{ asset('/components/AdminLTE/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js') }}"></script>
<!-- Slimscroll -->
<!-- FastClick -->
<!-- AdminLTE App -->
<!-- AdminLTE for demo purposes -->
<?php
    $chartData ='';
    foreach($orderByMonth as $key => $value){
        $chartData =$chartData.$key.'='.$value.'|';
    }
    //dd($chartData);
?>
<script>
    $(function () {
        /* jQueryKnob */
        $(".knob").knob();

        //生成报表数据
        var chartData=[];
        var orderData="{{$chartData}}".split('|').reverse();
        for(var i=0;i<orderData.length;i++){
            var curItem=orderData[i];
            if(curItem!=""){
                var monthObj=curItem.split('=');
                if(monthObj.length==2){
                    var arr=monthObj[0].split("");
                    arr.splice(4,0,'-');
                    chartData.push({y:arr.join(""),item1:monthObj[1]});
                }
            }
        }

        var line = new Morris.Line({
            element: 'line-chart',
            resize: true,
            data: chartData,
            xkey: 'y',
            ykeys: ['item1'],
            labels: ['订单数'],
            lineColors: ['#efefef'],
            lineWidth: 2,
            hideHover: 'auto' ,
            gridTextColor: "#fff",
            gridStrokeWidth: 0.4,
            pointSize: 4,
            pointStrokeColors: ["#efefef"],
            gridLineColor: "#efefef",
            gridTextFamily: "Open Sans",
            gridTextSize: 10
        });
        line.redraw();
    });
</script>
@endsection